<script setup lang="ts">
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'
</script>

<template>
  <div class="common-layout">
    <el-container>
      <p class="p1" align="center">图书管理系统</p>
      <div class="wz">
      <div style="font-size:0.1px"><i><p style="border-bottom:3px double black">通知栏：红楼梦已经售尽</p></i></div>
    
    </div>
      <el-header >
        <div class="word">
        <h1><MyTable1/></h1>
      </div></el-header>
      <el-container>
        <el-aside width="215px">
          <div class="xyk-item">
          <div class="left-icon-box">
          <img src="./assets/th.jpg" alt="" srcset="" style="max-width:100%;height:auto;">
          </div>
          <div class="right-box">
         <div class="time">书籍名：红楼梦
          <br/>作者：曹雨晴
        </div>
        <div class="h2">价格200￥</div>
        <div style="font-size:0.5px"><a >购买</a>&nbsp;&nbsp;&nbsp;<a >加入购物车</a></div>
      
        </div>
      </div>
      <div class="xyk-item">
          <div class="left-icon-box">
          <img src="./assets/th.jpg" alt="" srcset="" style="max-width:100%;height:auto;">
          </div>
          <div class="right-box">
         <div class="time">书籍名：红楼梦<a>jianjie</a>
          <br/>作者：曹雨晴
        
          
        </div>
        <div class="h2">价格200￥</div>
        
        </div>
      </div>
      <div class="xyk-item">
          <div class="left-icon-box">
          <img src="./assets/th.jpg" alt="" srcset="" style="max-width:100%;height:auto;">
          </div>
          <div class="right-box">
         <div class="time">书籍名：红楼梦
          <br/>作者：曹雨晴
        
          
        </div>
        <div class="h2">价格200￥</div>
        
        </div>
      </div>
        
        </el-aside>
        <el-main >购买记录<MyTable/></el-main>
      
        
      </el-container>
    </el-container>
  </div>
</template>
<style>
a{color:rgba(159, 41, 233, 0.658);}
a:hover{color:red;
  border-bottom: 1px solid #666;}

</style>
<style>
    .p1{
       color: rgb(214, 52, 52);       
      top: -20px;
      left: 20px;
            }
    .wz{
      width: 195px;
      height: 20px;
      background-color: red;
      margin-left: 700px;
      top:-50px;
      left: 20px;
	
	
      
    }
        </style>
<!--居中-->
<style>
  .word{  
    position:relative;
     left:20%;
     float:left;
    }
</style>
<!--图片格式-->
<style>
     .xyk-item{
    display: flex;
    border-bottom: 0.5px solid lightgrey;
}
 
.xyk-item .left-icon-box{
    flex: 0 0 100px;
}
 
.xyk-item .left-icon-box img{
    width: 80px;
    height: 80px;
    margin-left: 10px;
    margin-top: 1px;
}
.xyk-item .right-box{
    flex: 1;
}
 
.xyk-item .right-box .name{
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 20px;
    font-size: 14px;
    color: black;
 
    height: 40px;
    line-height: 20px;
    overflow: hidden;
    word-break: break-all;
}
 
.xyk-item .right-box .time{
    display: block;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
}
.h2{
  text-decoration: underline;
}

</style>
